<%-- 
    Document   : allallocations
    Created on : 24 Sep 2013, 9:30:53 PM
    Author     : Salman Noor : School of Electrical and Information Engineering
--%>
<%@taglib prefix="kendo" uri="http://www.kendoui.com/jsp/tags"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ include file="/WEB-INF/common/hometaglibs.jsp" %>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <body>
        <div id="mainContainer">
            <h1 class="exampleTitle"><strong>Work Allocation</strong> System</h1>            
            <div id="mainSubContainer">
                <div id="leftNav">
                    <%@include file="/WEB-INF/includes/sideNavBar.jsp" %>
                </div>
                <div id="actualSuperContentContainer">
                    <h1 class="exampleTitle subTitle">View All <strong>Allocations</strong></h1>   
                    <input name='baseURL' type='hidden' value='<c:url value="/approvals/Allocations/"/>'/>
                    <div id="example" class="k-content">        
                        <div id="tabstrip">
                            <ul>
                                <li class="k-state-active">
                                    Research Allocations
                                </li>
                                <li>
                                    Course Allocations
                                </li>
                            </ul>
                            <div class="personalAll">
                                <div class='formElementHolder'>
                                    <label for="research_discipline" class="k-label-top">Select Discipline Code:</label>
                                    <input id="research_discipline" name="research discipline" style="width: 350px;" />
                                </div>
                                <div id="researchGrid"></div>
                            </div>
                            <div class="personalAll">
                                <div class='formElementHolder'>
                                    <label for="course_discipline" class="k-label-top">Select Discipline Code:</label>
                                    <input id="course_discipline" name="course discipline" style="width: 350px;" />
                                </div>
                                <div id="courseGrid"></div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/x-kendo-template" id="researchTemplate">
<div class="researchtabstrip">
    <ul>
        <li class="k-state-active">
           Research Information
        </li>
        <li>
            Academic Staff Member Information
        </li>
    </ul>
    <div>
        <div class='employee-details'>
            <ul>
                <li><label>Research Topic:</label>#= research_topic  #</li>
                <li><label>Research Description:</label>#= research_description  #</li>
                <li><label>Research Hours:</label>#= research_hours  #</li>
                <li><label>Research Time Span:</label>#= research_start_date+' - '+research_end_date  #</li>
                <li><label>Taking Sabbatical:</label>#= research_sabbatical  #</li>
                <li><label>Sabbatical Time Span:</label>#= sabbatical_start_date+' - '+sabbatical_end_date  #</li>
            </ul>
        </div>
    </div>
    <div>
        <div class='employee-details'>
            <ul>
                <li><label>First Name:</label>#= academic_staff_member.firstname  #</li>
                <li><label>Last Name:</label>#= academic_staff_member.lastname  #</li>
                <li><label>Email Address:</label>#= academic_staff_member.email_address  #</li>
                                
                <li><label>Staff Number:</label>#= academic_staff_member.staff_number  #</li>
                <li><label>Discipline Code:</label>#= academic_staff_member.discipline_code  #</li>
                                
                <li><label>Citizenship Percentage:</label>#= academic_staff_member.citizenship_percentage  #</li>
                <li><label>Contract Type:</label>#= academic_staff_member.contract_type  #</li>
                <li><label>Job Position:</label>#= academic_staff_member.job_position  #</li>
                <li><label>Qualification:</label>#= academic_staff_member.qualification  #</li>
                <li><label>Research Percentage:</label>#= academic_staff_member.research_percentage  #</li>
                <li><label>Teaching Percentage:</label>#= academic_staff_member.teaching_percentage  #</li>
                <li><label>Total Hours:</label>#= academic_staff_member.total_hours  #</li>
                                
            </ul>
        </div>
    </div>
</div>

        </script>
                <script type="text/x-kendo-template" id="courseTemplate">
                     <div class="coursetabstrip">
                         <ul>
                             <li class="k-state-active">
                                Course Information
                             </li>
                             <li>
                                 Academic Staff Member Information
                             </li>
                         </ul>
                         <div>
                             <div class='employee-details'>
                                 <ul>
                                     <li><label>Course Name:</label>#= course.course_name  #</li>
                                     <li><label>Course Code:</label>#= course.course_code  #</li>
                                     <li><label>Start Date:</label>#= start_date  #</li>
                                     
                                     <li><label>Course Slot:</label>#= course.course_slot  #</li>
                                     <li><label>Day of Week:</label>#= course.weekday  #</li>
                                     <li><label>Teaching Time Span:</label>#= course.start_time+' - '+course.end_time  #</li>
                                     <li><label>Semester:</label>#= course.semester  #</li>
                                     <li><label>Discipline Code:</label>#= course.discipline_code  #</li>
                                     <li><label>Course Hours:</label>#= course.course_hours  #</li>
                                 </ul>
                             </div>
                         </div>
                         <div>
                             <div class='employee-details'>
                                 <ul>
                                     <li><label>First Name:</label>#= academic_staff_member.firstname  #</li>
                                     <li><label>Last Name:</label>#= academic_staff_member.lastname  #</li>
                                     <li><label>Email Address:</label>#= academic_staff_member.email_address  #</li>
                                
                                     <li><label>Staff Number:</label>#= academic_staff_member.staff_number  #</li>
                                     <li><label>Discipline Code:</label>#= academic_staff_member.discipline_code  #</li>
                                
                                     <li><label>Citizenship Percentage:</label>#= academic_staff_member.citizenship_percentage  #</li>
                                     <li><label>Contract Type:</label>#= academic_staff_member.contract_type  #</li>
                                     <li><label>Job Position:</label>#= academic_staff_member.job_position  #</li>
                                     <li><label>Qualification:</label>#= academic_staff_member.qualification  #</li>
                                     <li><label>Research Percentage:</label>#= academic_staff_member.research_percentage  #</li>
                                     <li><label>Teaching Percentage:</label>#= academic_staff_member.teaching_percentage  #</li>
                                     <li><label>Total Hours:</label>#= academic_staff_member.total_hours  #</li>
                                
                                 </ul>
                             </div>
                         </div>
                     </div>

        </script>
        <script>
            $(document).ready(function() {
                var baseURL = $("input[name='baseURL']").val();
                $("#tabstrip").kendoTabStrip({
                    animation: {
                        open: {
                            effects: "fadeIn"
                        }
                    }
                });

                $("#research_discipline").kendoComboBox({
                    autobind: false,
                    placeholder: "Discipline Code",
                    change: function() {
                        var disciplineID = this.value();
                        $("#researchGrid").kendoGrid({
                            dataSource: {
                                transport: {
                                    read: {
                                        url: baseURL + "research/" + disciplineID,
                                        dataType: "json"
                                    }
                                },
                                pageSize: 20
                            },
                            height: 430,
                            sortable: true,
                            pageable: true,
                            detailTemplate: kendo.template($("#researchTemplate").html()),
                            detailInit: detailResearchInit,
                            columns: [
                                {
                                    title: "Name",
                                    template: "#=academic_staff_member.firstname +' '+ academic_staff_member.lastname#",
                                    filterable: false,
                                    attributes: {
                                        "class": "table-cell"
                                    },
                                    width: 90
                                },
                                {
                                    field: "research_topic",
                                    title: "Research Topic",
                                    attributes: {
                                        "class": "table-cell"
                                    },
                                    width: 100
                                },
                                {
                                    field: "research_hours",
                                    title: "Hours",
                                    width: 40,
                                    type: "number",
                                    attributes: {
                                        "class": "table-cell"
                                    }
                                },
                                {
                                    template: "#=research_start_date+'-'+research_end_date#",
                                    title: "Duration",
                                    attributes: {
                                        "class": "table-cell"
                                    },
                                    width: 120
                                },
                                {
                                    field: "research_sabbatical",
                                    title: "Taking Sabbatical",
                                    width: 75,
                                    type: "boolean",
                                    attributes: {
                                        "class": "table-cell"
                                    }
                                }
                            ]
                        });


                    },
                    dataTextField: "discipline_code",
                    dataValueField: "discipline_id",
                    filter: "contains",
                    dataSource: {
                        pageSize: 10,
                        serverPaging: true,
                        serverFiltering: true,
                        serverSorting: true,
                        transport: {
                            read: {
                                url: baseURL + "disciplines",
                                //using jsfiddle echo service to simulate JSON endpoint
                                dataType: "json",
                                type: "POST",
                            }
                        }
                    }
                });



                $("#course_discipline").kendoComboBox({
                    autobind: false,
                    placeholder: "Discipline Code",
                    change: function() {
                 var disciplineID = this.value();                                        
                    $("#courseGrid").kendoGrid({
                    dataSource: {
                        transport: {
                            read: {
                                url: baseURL + "courses/"+disciplineID,
                                dataType: "json"
                            }
                        },
                        pageSize: 20
                    },
                    height: 430,
                    sortable: true,
                    pageable: true,
                    detailTemplate: kendo.template($("#courseTemplate").html()),
                    detailInit: detailCourseInit,
                    columns: [
                        {
                            title: "Name",
                            template: "#=academic_staff_member.firstname +' '+ academic_staff_member.lastname#",
                            filterable: false,
                            attributes: {
                                "class": "table-cell"
                            },
                            width: 90
                        },
                        {
                            field: "course.discipline_code",
                            title: "Discipline",
                            width: 50,
                            attributes: {
                                "class": "table-cell"
                            }
                        },
                        {
                            field: "course.course_full_name",
                            title: "Course",
                            attributes: {
                                "class": "table-cell"
                            },
                            width: 130
                        },
                        {
                            field: "start_date",
                            title: "Start Date",
                            attributes: {
                                "class": "table-cell"
                            },
                            width: 60
                        },
                        {
                            field: "course.course_hours",
                            title: "Hours",
                            width: 30,
                            type: "number",
                            attributes: {
                                "class": "table-cell"
                            }
                        },
                        {
                            field: "course.course_slot",
                            title: "Slot",
                            width: 30,
                            attributes: {
                                "class": "table-cell"
                            }
                        }
                    ]
                });
                
                
                
                    },
                    dataTextField: "discipline_code",
                    dataValueField: "discipline_id",
                    filter: "contains",
                    dataSource: {
                        pageSize: 10,
                        serverPaging: true,
                        serverFiltering: true,
                        serverSorting: true,
                        transport: {
                            read: {
                                url: baseURL + "disciplines",
                                //using jsfiddle echo service to simulate JSON endpoint
                                dataType: "json",
                                type: "POST",
                            }
                        }
                    }
                });
            });

            function detailResearchInit(e) {
                var detailRow = e.detailRow;

                detailRow.find(".researchtabstrip").kendoTabStrip({
                    animation: {
                        open: {effects: "fadeIn"}
                    }
                });


            }
            
                        function detailCourseInit(e) {
                var detailRow = e.detailRow;

                detailRow.find(".coursetabstrip").kendoTabStrip({
                    animation: {
                        open: {effects: "fadeIn"}
                    }
                });


            }
        </script>
        <style>
            .formElementHolder{width:700px;padding: 15px;}
            .formElementHolder label{float:left;width:200px; text-align: right; padding-right: 10px;}
            .personalAll{
                /*width:750px;*/
                /*float:right;*/
                /*padding :1%;*/
            }
            .tableContainer{
                font-size: 75% !important;
            }
            .table-cell{
                font-size: 11px;
                text-align: left;
                color: #2E2E2E;
            }
            .k-header {
                font-size: 11px;
            }
            .k-button{
                font-size: 11px; 
            }

            .k-detail-cell .k-tabstrip .k-content {
                padding: 0.2em;
            }
            .employee-details ul
            {
                list-style:none;
                font-style:italic;
                margin: 15px;
                padding: 0;
            }
            .employee-details ul li
            {
                margin: 0;
                line-height: 1.7em;
            }

            .employee-details label
            {
                display:inline-block;
                width:130px;
                padding-right: 10px;
                text-align: right;
                font-style:normal;
                font-weight:bold;
            }

        </style>
    </body>

</html>
